import echarts from '@/utils/echarts/index.js'

/**
 * 绘制折线图
 * @param {optionObj} optionObj - 折线图配置对象
 * 
 * @typedef {Object} optionObj
 * @property {string} dom - 图表容器的 DOM 选择器
 * @property {Array} xData - x轴数据
 * @property {Array} yData - y轴数据
 * @property {string} [lineColor='#2D79F8'] - 折线颜色
 * @property {string} [areaColor='#F3F7FF'] - 区域颜色      
 * 
 * @returns {Object} myChart - echarts 实例
 */
export function drawLineChart(optionObj) {
    const myChart = echarts.init(optionObj.dom)
    const option = {
        tooltip: {
            trigger: 'axis', // 设置触发类型为坐标轴
        },
        grid: {
            top: '0%', // 设置顶部边距为5像素，让折线图尽可能靠近上边缘
            bottom: '10%',
            left: '-5%',
            right: '20%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            title: { show: false }, // 不显示标题
            data: optionObj.xData, // 设置x轴数据
            axisTick: {
                show: false, // 隐藏刻度
            },
            axisLabel: {
                interval: 13, // 设置标签间隔
            },
            axisLine: {
                show: false, // 隐藏轴线
            },
        },
        yAxis: {
            type: 'value',
            show: false,
            max: Math.max(...optionObj.yData), // 设置y轴最大值
        },
        series: [
            {
                data: optionObj.yData,
                type: 'line',
                symbol: 'none', // 隐藏曲线上的点
                lineStyle: {
                    color: optionObj.lineColor || '#2D79F8', // 设置线条颜色
                },
                areaStyle: {
                    color: optionObj.areaColor || '#F3F7FF', // 设置区域颜色，可以使用 rgba 颜色格式
                },
            },
        ],
    }
    myChart.setOption(option)
    return myChart
}